<template>
	<view class="acc-content">
		<view class="acc-wrap">
			<u-gap height="16" bgColor="#f7f6fa"></u-gap>
			<u-input :customStyle="addStyle" placeholder="请输入当前密码" border="none" v-model="modifyObj.curPassword"
				maxlength="8" :password='curPasswordShow'>
				<template slot="suffix">
					<u-icon :name="suffixIconCur" @click="suffixCur()" size="18" color="#bcbfcc"></u-icon>
				</template>
			</u-input>
			<u-gap height="1" bgColor="#f5f5f5" style="margin-left: 15px;margin-right: 0"></u-gap>
			<u-input :customStyle="addStyle" placeholder="新的密码" border="none" v-model="modifyObj.newPassword"
				maxlength="8" :password='newPasswordShow'>
				<template slot="suffix">
					<u-icon :name="suffixIconNew" @click="suffixNew()" size="18" color="#bcbfcc"></u-icon>
				</template>
			</u-input>
			<u-gap height="1" bgColor="#f5f5f5" style="margin-left: 15px;margin-right: 0"></u-gap>
			<u-input :customStyle="addStyle" placeholder="确认密码" border="none" v-model="modifyObj.surePassword"
				maxlength="8" :password='passwordShow'>
				<template slot="suffix">
					<u-icon :name="suffixIcon" @click="suffix()" size="18" color="#bcbfcc"></u-icon>
				</template>
			</u-input>
			<u-gap height="24" bgColor="#f7f6fa"></u-gap>
			<u-button hairline>确定</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				passwordShow: true,
				curPasswordShow: true,
				newPasswordShow: true,
				modifyObj: {
					curPassword: "",
					newPassword: "",
					surePassword: ""
				},
				addStyle: {
					height: "50px",
					padding: "9px 15px"
				}
			}
		},
		// 密码的显示方式
		computed: {
			suffixIconCur() {
				if (this.modifyObj.curPassword === '') {
					return 'eye';
				}
				if (this.curPasswordShow) {
					return 'eye';
				}
				return 'eye-off';
			},
			suffixIconNew() {
				if (this.modifyObj.newPassword === '') {
					return 'eye';
				}
				if (this.newPasswordShow) {
					return 'eye';
				}
				return 'eye-off';
			},
			suffixIcon() {
				if (this.modifyObj.surePassword === '') {
					return 'eye';
				}
				if (this.passwordShow) {
					return 'eye';
				}
				return 'eye-off';
			},
		},
		methods: {
			suffixCur() {
				this.curPasswordShow = !this.curPasswordShow;
			},
			suffixNew() {
				this.newPasswordShow = !this.newPasswordShow;
			},
			suffix() {
				this.passwordShow = !this.passwordShow;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.acc-wrap {
		width: 100%;
		background-color: #fff;
	}

	.acc-wrap /deep/ .u-button {
		font-size: 30rpx;
		height: 100rpx;
	}

	.acc-wrap /deep/ .u-cell__body {
		padding: 28rpx 30rpx;
	}
</style>